<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="王超凡">
    <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="./唯品会.css">
    <link rel="stylesheet" href="./font-awesome/css/font-awesome.css">
    <title></title>
    <style>

    </style>
</head>

<body>
    <header>
        <div class="nav">
            <div class="header1">
                <ul class="header01">
                    <li class="header1-1">
                        <a href="">
                            <span class="xiaobiankuang">河南<i class="sanjiao"></i></span>
                        </a>
                        <ul class="shouhuo">
                            <div class="yaxiankuang"></div>
                            <span class="shouhuo1"><b>请选择所在的收货地区</b></span>
                            <hr>
                            <li><a href="">A 安徽 澳门</a></li><br>
                            <li><a href="">B 北京</a></li><br>
                            <li><a href="">C 重庆</a></li>
                        </ul>

                    </li>
                </ul>
                <ul class="header1-2">
                    <li class="header1-2-1">
                        <a href="">
                            <span class="xiaobiankuang">请登录</span>
                        </a>
                        <ul class="shouhuo">
                            <div class="yaxiankuang"></div>
                            <li class="denglu1"><a href="">您好！[请登录]</a></li>
                            <li><a href="">我的收藏</a></li>
                            <li><a href="">我的订单</a></li>
                            <li><a href="">零钱</a></li>
                            <li><a href="">我的优惠券</a></li>
                            <li><a href="">我的唯品币</a></li>
                            <li><a href="">唯品金融</a></li>
                        </ul>
                    </li>
                    <li>/</li>
                    <li><a href="">注册</a></li>
                    <li>/</li>
                    <li><a href=""><i class="dongtu"></i>签到有礼</a>
                        <div class="dongtu1">
                            <div class="baisesanjiao"></div>
                            <ul class="dongtu1-1">
                                <div class="xian"></div>
                                <li><i class="yuan"></i></li>
                                <li><i class="yuan"></i></li>
                                <li><i class="yuan"></i></li>
                                <li><i class="yuan"></i></li>
                                <li><i class="yuan"></i></li>
                                <li><i class="yuan"></i></li>
                                <li><i class="yuan"></i></li>
                            </ul>
                            <ul class="dongtu1-2">
                                <li>1天</li>
                                <li>2天</li>
                                <li>3天</li>
                                <li>4天</li>
                                <li>5天</li>
                                <li>6天</li>
                                <li>7天</li>
                            </ul>
                            <hr>
                            <span>每天签到送惊喜，连续签到更享心动奖励</span>
                            <div class="qiandao">签到</div>
                        </div>
                    </li>
                    <li>/</li>
                    <li><a href="">我的订单</a></li>
                    <li>/</li>
                    <li class="header1-2-2">
                        <a href=""><span class="xiaobiankuang">我的特卖<i class="sanjiao"></i></span></a>
                        <ul class="wodetemai">
                            <div class="yaxiankuang1"></div>
                            <li><a href="">品牌收藏</a></li>
                            <li><a href="">商品收藏</a></li>
                            <li><a href="">我的足迹</a></li>
                        </ul>
                    </li>
                    <li>/</li>
                    <li class="header1-2-3">
                        <a href=""><span class="xiaobiankuang">会员俱乐部<i class="sanjiao"></i></span>
                        </a>
                        <ul class="huiyuanjulebu">
                            <div class="yaxiankuang2"></div>
                            <li><a href="">俱乐部首页</a></li>
                            <li><a href="">唯品币兑换</a></li>
                            <li><a href="">免费抽大奖</a></li>
                        </ul>
                    </li>
                    <li>/</li>
                    <li><a href="">客户服务<i class="sanjiao"></i></a></li>
                    <li>/</li>
                    <li><a href=""><i class="shouji"></i>手机版</a></li>
                    <li>/</li>
                    <li class="header1-2-4">
                        <a href=""><span class="xiaobiankuang">更多<i class="sanjiao"></i></span>
                        </a>
                        <ul class="gengduo101">
                            <div class="yaxiankuang3"></div>
                            <li><a href="">合作专区</a></li><br>
                            <li><a href="">联名卡申请</a></li>
                            <li><a href="">唯品卡</a></li>
                            <li><a href="">支付专区</a></li><br>
                            <br>
                            <hr>
                            <li><a href="">关于我们</a></li><br>
                            <li><a href="">Sell on vip</a></li>
                            <li><a href="">品牌招商</a></li>
                            <li><a href="">官方博客</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

        <div class="logo">
            <div class="logo1">
                <div class="logo1-1">
                    <a href=""><img src="./img/logo.png" alt=""></a>
                </div>
                <div class="logo1-2">
                    <a href=""><img src="./img/logo_img01.png" alt=""></a>
                    <a href=""><img src="./img/logo_img02.png" alt=""></a>
                    <a href=""><img src="./img/logo_img03.png" alt=""></a>
                </div>
                <div class="logo1-3">
                    <div class="logo1-3-1">
                        <a href="">
                            <span class="xiaobiankuang1"><img src="./img/suo.png" alt="">我的购物袋</span>
                        </a>
                        <div class="logo1-3-1-1">
                            <div class="yaxiankuang4"></div>
                            <span>好像还未登录！马上登录 查看购物袋吧！</span>

                        </div>
                    </div>

                </div>

            </div>

        </div>

        <div class="daohang">

            <div class="daohang1">
                <div class="daohang1-1">
                    <ul class="daohang1-1-1">
                        <li><a href="">首页</a></li>
                        <li><a href="">唯品国际</a></li>
                        <li><a href="">母婴</a></li>
                        <li><a href="">家居家电</a></li>
                        <li><a href="">男士</a></li>
                        <li><a href="">美妆</a></li>
                        <li><a href="">生活超市</a></li>
                        <li><a href="">金融</a></li>
                        <li class="gengduo1">
                            <a href="">更多</a>
                            <i class="sanjiao"></i>
                            <div class="gengduo">

                                <div class="daxiao">
                                    <a href="">
                                        <img src="./img/more01.jpg" alt="">
                                        <div class="yinying"></div>
                                        <div class="zi">女装</div>
                                    </a>
                                </div>
                                <div class="daxiao">
                                    <a href="">
                                        <img src="./img/more02.jpg" alt="">
                                        <div class="yinying"></div>
                                        <div class="zi">鞋包</div>
                                    </a>
                                </div>
                                <div class="daxiao">
                                    <a href="">
                                        <img src="./img/more03.jpg" alt="">
                                        <div class="yinying"></div>
                                        <div class="zi">配饰</div>
                                    </a>
                                </div>
                                <div class="daxiao">
                                    <a href="">
                                        <img src="./img/more04.jpg" alt="">
                                        <div class="yinying"></div>
                                        <div class="zi">运动</div>
                                    </a>
                                </div>
                                <div class="daxiao">
                                    <a href="">
                                        <img src="./img/more05.jpg" alt="">
                                        <div class="yinying"></div>
                                        <div class="zi">唯品·奢</div>
                                    </a>
                                </div>

                            </div>
                        </li>
                    </ul>
                    <ul class="daohang1-1-2">
                        <li><i class="yugao"></i><a href="">预告</a></li>
                        <li><i class="fenlei"></i><a href="">分类</a></li>
                    </ul>
                </div>
            </div>

        </div>
    </header>

    <div class="lunbotu">

        <div class="lunbotu1">
            <ul class="lunbotu1-1">
                <li class="lunbotu1-1-1">
                    <a href=""><img src="./img/lunbo01.jpg" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="./img/lunbo02.jpg" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="./img/lunbo03.jpg" alt=""></a>
                </li>
            </ul>
            <ul class="lunbotu1-2">
                <li class="lunbotu1-2-1"><a href="">时尚风暴 最高满199减40</a></li>
                <li><a href="">净水节 最高500元红包</a></li>
                <li><a href="">安莉芳集团 跨专场3件8折</a></li>
            </ul>
            <div class="lunbotu1-3">
                <span class="lunbotu1-3-1">&lt;</span>
                <span class="lunbotu1-3-2">&gt;</span>
            </div>
        </div>

    </div>

    <div class="ditu">
        <div class="ditu1">
            <section>
                <a href="">
                    <div class="ditu1-1"></div><img src="./img/01.jpg" alt=""></a>
            </section>
            <section>
                <a href="">
                    <div class="ditu1-1"></div><img src="./img/02.jpg" alt=""></a>
            </section>
            <section>
                <a href="">
                    <div class="ditu1-1"></div><img src="./img/03.jpg" alt=""></a>
            </section>
        </div>
    </div>

    <div class="youlan">

        <div class="youlan1">
            <div class="youlan1-1">
               <ul class="youlan1-1-1">
                   <li class="youlan1-1-1-1"><a href=""><i class="zhanghao"></i></a>
                       <div class="zhanghao1">
                           <div class="zhanghao1-1">
                               <img src="./img/qingdenglu.png" alt=""><br>
                               你好！请登录|注册
                           </div>
                           <div class="zhanghao1-2">
                               <div><img src="./img/wodedingdan.png" alt=""><br>我的订单</div>
                               <div><img src="./img/wodexiaoxi.png" alt=""><br>我的消息</div>
                           </div>
                           <div class="zhanghao1-3">会员俱乐部</div>
                       </div>
                   </li>
                   <li><a href=""><i class="gouwudai"></i><img src="./img/gouwudai.png" alt=""></a></li>
                        
                   <li><a href=""><i class="youhuiquan"></i></a>
                       <div class="youhuiquantanchuang">我的优惠券</div>
                   </li>
                   <li><a href=""><i class="shoucang1"></i></a>
                       <div class="shoucang1tanchuang">品牌收藏</div>
                   </li>
                   <li><a href=""><i class="shoucang2"></i></a>
                       <div class="shoucang2tanchuang">商品收藏</div>
                   </li>
                   <li><a href=""><i class="wodezuji"></i></a>
                       <div class="wodezujitanchuang">我的足迹</div>
                   </li>
                   <li><a href=""><i class="huiyuanfankui"></i></a>
                       <div class="huiyuanfankuitanchuang">会员反馈</div>
                   </li>
                   <li><a href=""><i class="fanhuidingbu"></i></a>
                       <div class="fanhuidingbutanchuang">返回顶部</div>
                   </li>
               </ul>
            </div>

            <div class="youlan1-2">
                <div></div>
                <div></div>
            </div>
        </div>

    </div>
    
</body>

</html>
<script>

    var daohang = document.querySelector('.daohang1');
    var youlan = document.querySelector('.youlan');
    window.onscroll = function () {
        var scrollTop = document.body.scrollTop ||
            document.documentElement.scrollTop;

        if (scrollTop >= 1) {
            youlan.style.position = 'fixed';
            youlan.style.top = '0';
        }
        if (scrollTop >= 170) {
            daohang.style.position = 'fixed';
            daohang.style.top = '0';
        } else {
            daohang.style.position = 'static';
        }
    }

    var lunbotu1 = document.querySelector('.lunbotu1');
    var lunbotutupian = document.querySelectorAll('.lunbotu1-1 li');
    var lunbotudian = document.querySelectorAll('.lunbotu1-2 li');
    var zuoanniu = document.querySelector('.lunbotu1-3-1');
    var youanniu = document.querySelector('.lunbotu1-3-2');
    var index = 0;

    function zuoanniuImg() {
        index = index == 0 ? index = lunbotutupian.length - 1 : index - 1;
        showImg();
    }

    function youanniuImg() {
        index = index == lunbotutupian.length - 1 ? 0 : index + 1;
        showImg();
    }

    function showImg() {
        for (var i = 0; i < lunbotutupian.length; i++) {
            lunbotutupian[i].className = '';
            lunbotudian[i].className = '';
        }
        lunbotutupian[index].className = 'lunbotu1-1-1';
        lunbotudian[index].className = 'lunbotu1-2-1';
       
    }

    var timer = setInterval(youanniuImg, 2000);


    for (var i = 0; i < lunbotudian.length; i++) {
        lunbotudian[i].index = i;
        lunbotudian[i].onmouseover = function () {

            clearInterval(timer);
            timer = null;
            index = this.index;
            showImg();
        }
        lunbotudian[i].onmouseout = function () {

            if (timer) return;
        }
    }
 
    lunbotu1.onmouseover = function () {
        clearInterval(timer);
        timer = null;
        zuoanniu.style.display = 'block';
        youanniu.style.display = 'block';
    }
    lunbotu1.onmouseout = function () {
        if (timer) return;
        zuoanniu.style.display = 'none';
        youanniu.style.display = 'none';
    }

    zuoanniu.onclick = function () {
        zuoanniuImg();
    }

    youanniu.onclick = function () {
        youanniuImg();
    }





</script>